<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<button class="button" onclick="getByIdExample()" >Run Example </button >
<div id="example" > </div >
<Script>
// Access by ID
function getByIdExample() {
let element = document.getElementById('example');
element.innerHTML = "Element accessed using getElementById()";
}
</Script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<button onclick="getByClassNameExample()">Run Example</button >
<div class="exampleClass"></div >
<Script>
// Access by Class Name
function getByClassNameExample() {
let elements = document.getElementsByClassName('exampleClass');
if (elements.length > 0) {
elements[0].textContent = "Element accessed using getElementsByClassName()";
}
}
</Script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<button onclick="getByTagNameExample()">Run getElementsByTagName </Button>
<p class="p">Tag Example</p>
<Script>
// Access by Tag Name
function getByTagNameExample() {
let elements = document.getElementsByTagName('p');
if (elements.length > 0) {
elements[0].textContent = "Element accessed using getElementsByTagName()";
}
}
</Script>
</body>
</html>
Tag Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<button onclick="querySelectorExample()">Run querySelector </button >
<div id="queryExample" class="output-box">
<p class="child-element">Child Element</p>
</div>
<Script>
// Access using querySelector
function querySelectorExample() {
let element = document.querySelector('#queryExample .child-element');
element.textContent = "Element accessed using querySelector()";
}
</Script>
</body>
</html>
Child Element
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<button onclick="querySelectorAllExample()">Run querySelectorAll</button >
<div class="queryAllExample output-box">
<p>Item 1</p>
<p>Item 2</p>
</div>
<Script>
// Access using querySelectorAll
function querySelectorAllExample() {
let elements = document.querySelectorAll('.queryAllExample p');
elements.forEach(function(element, index) {
element.textContent = "Element " + (index + 1) + " accessed using querySelectorAll()";
});
}
</Script>
</body>
</html>
Item 1
Item 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<button onclick="modifyInnerHTML()">Modify innerHTML</button >
<div id="innerHTMLExample" class="output-box">Original Content</div>
<Script>
// Modify innerHTML
function modifyInnerHTML() {
let element = document.getElementById('innerHTMLExample');
element.innerHTML = '<strong>Welcome To AIT!</strong>';
}
</Script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<button onclick="modifyTextContent()">Modify textContent</button >
<div id="textContentExample" class="output-box">Original Content </div>
</div>
<Script>
// Modify textContent
function modifyTextContent() {
let element = document.getElementById('textContentExample');
element.textContent = "Welcome To AIT!";
}
</Script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<button onclick="createAndAppendElement()">Create & Append Element</button >
<div id="createElementExample" class="output-box">Existing Content</div>
</div>
<Script>
// Create and append an element
function createAndAppendElement() {
let newElement = document.createElement('p');
newElement.textContent = "This is a new paragraph created and appended using createElement() and appendChild().";
document.getElementById('createElementExample').appendChild(newElement);
}
</Script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<button onclick="insertBeforeExample()">Insert Element Before</button >
<div id="insertBeforeExample" class="output-box">
<p id="referenceNode">Reference Node</p>
</div>
<Script>
// Insert element before another element
function insertBeforeExample() {
let newElement = document.createElement('p');
newElement.textContent = "This paragraph was inserted using insertBefore().";
let referenceNode = document.getElementById('referenceNode');
document.getElementById('insertBeforeExample').insertBefore(newElement, referenceNode);
}
</Script>
</body>
</html>
Reference Node